theme: Adjust CSS for RTL locales

Use :ltr/:rtl pseudo selectors where the CSS depends on the locale's
text direction.

https://bugzilla.gnome.org/show_bug.cgi?id=643835

diff --git a/data/Makefile.am b/data/Makefile.am
index 1f207ef78dacf5a59dc620f46751759b81890f01..58c74643847c62dd94ea040cb03d27d2e8bfeabf 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -26,7 +26,8 @@ dist_theme_DATA =                             \
        theme/close.svg                         \
        theme/corner-ripple.png                 \
        theme/dash-placeholder.svg              \
-       theme/filter-selected.svg               \
+       theme/filter-selected-ltr.svg           \
+       theme/filter-selected-rtl.svg           \
        theme/gnome-shell.css                   \
        theme/mosaic-view-active.svg            \
        theme/mosaic-view.svg                   \

diff --git a/data/theme/filter-selected-ltr.svg b/data/theme/filter-selected-ltr.svg
new file mode 100644 (file)
index 0000000..62c8e5b
--- /dev/null
+++ b/data/theme/filter-selected-ltr.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="20"
+   id="svg10003"
+   version="1.1"
+   inkscape:version="0.47 r22583"
+   sodipodi:docname="filter-selected.svg">
+  <defs
+     id="defs10005">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 32 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="64 : 32 : 1"
+       inkscape:persp3d-origin="32 : 21.333333 : 1"
+       id="perspective10011" />
+    <inkscape:perspective
+       id="perspective9998"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.5"
+     inkscape:cx="32"
+     inkscape:cy="10.181818"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="994"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata10008">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-44)">
+    <path
+       inkscape:export-ydpi="90"
+       inkscape:export-xdpi="90"
+       inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/app-picker.png"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="rect34320"
+       d="m -0.18726572,54.181804 10.55634072,10.55636 10e-6,-21.11269 z"
+       style="opacity:0.21000001;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>

diff --git a/data/theme/filter-selected-rtl.svg b/data/theme/filter-selected-rtl.svg
new file mode 100644 (file)
index 0000000..94af6bb
--- /dev/null
+++ b/data/theme/filter-selected-rtl.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="20"
+   id="svg10003"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="filter-selected-ltr.svg">
+  <defs
+     id="defs10005">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 32 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="64 : 32 : 1"
+       inkscape:persp3d-origin="32 : 21.333333 : 1"
+       id="perspective10011" />
+    <inkscape:perspective
+       id="perspective9998"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.5"
+     inkscape:cx="32.363636"
+     inkscape:cy="10.181818"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:document-units="px"
+     inkscape:grid-bbox="true"
+     inkscape:window-width="1440"
+     inkscape:window-height="839"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata10008">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-44)">
+    <path
+       inkscape:export-ydpi="90"
+       inkscape:export-xdpi="90"
+       inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/app-picker.png"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="rect34320"
+       d="m 10.369085,54.181804 -10.55634072,10.55636 -1e-5,-21.11269 z"
+       style="opacity:0.21000001;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>

diff --git a/data/theme/filter-selected.svg b/data/theme/filter-selected.svg
deleted file mode 100644 (file)
index 62c8e5b..0000000
--- a/data/theme/filter-selected.svg
+++ /dev/null
@@ -1,81 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="10"
-   height="20"
-   id="svg10003"
-   version="1.1"
-   inkscape:version="0.47 r22583"
-   sodipodi:docname="filter-selected.svg">
-  <defs
-     id="defs10005">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 32 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="64 : 32 : 1"
-       inkscape:persp3d-origin="32 : 21.333333 : 1"
-       id="perspective10011" />
-    <inkscape:perspective
-       id="perspective9998"
-       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
-       inkscape:vp_z="1 : 0.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 0.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="5.5"
-     inkscape:cx="32"
-     inkscape:cy="10.181818"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:document-units="px"
-     inkscape:grid-bbox="true"
-     inkscape:window-width="1680"
-     inkscape:window-height="994"
-     inkscape:window-x="0"
-     inkscape:window-y="26"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata10008">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     transform="translate(0,-44)">
-    <path
-       inkscape:export-ydpi="90"
-       inkscape:export-xdpi="90"
-       inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/app-picker.png"
-       sodipodi:nodetypes="cccc"
-       inkscape:connector-curvature="0"
-       id="rect34320"
-       d="m -0.18726572,54.181804 10.55634072,10.55636 10e-6,-21.11269 z"
-       style="opacity:0.21000001;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-</svg>

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index da21721e7b7cbca6db8c20c5fcd7de565f95a7ad..56e7496bd1931f64e72b129c8d65d83afc021280 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -195,21 +195,19 @@ StTooltip StLabel {
     font-weight: bold;
 }
 
-#panelLeft {
+#panelLeft:ltr {
     padding-right: 4px;
 }
 
 #panelLeft:rtl {
-    padding-right: 0px;
     padding-left: 4px;
 }
 
-#panelRight {
+#panelRight:ltr {
     padding-left: 4px;
 }
 
 #panelRight:rtl {
-    padding-left: 0px;
     padding-right: 4px;
 }
 
@@ -297,6 +295,11 @@ StTooltip StLabel {
     padding-left: 14px;
 }
 
+#legacyTray:rtl {
+    padding-left: 0px;
+    padding-right: 14px;
+}
+
 #legacyTray:compact {
     spacing: 8px;
 }
@@ -360,6 +363,10 @@ StTooltip StLabel {
     -shell-close-overlap: 16px;
 }
 
+.window-close:rtl {
+    -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
+}
+
 /* Dash */
 
 #dash {
@@ -473,10 +480,15 @@ StTooltip StLabel {
 }
 
 #searchResultsContent {
-    padding: 0 20px 0 0;
+    padding-right: 20px;
     spacing: 36px;
 }
 
+#searchResultsContent:rtl {
+    padding-right: 0px;
+    padding-left: 20px;
+}
+
 .search-statustext,
 .search-section-header {
     padding: 4px 12px;
@@ -541,6 +553,11 @@ StTooltip StLabel {
     spacing: 20px;
 }
 
+.all-app:rtl {
+    padding-right: 16px;
+    padding-left: 25px;
+}
+
 .app-filter {
     font-size: 14px;
     font-weight: bold;
@@ -551,10 +568,15 @@ StTooltip StLabel {
 
 .app-filter:selected {
     color: #ffffff;
-    background-image: url("filter-selected.svg");
+    background-image: url("filter-selected-ltr.svg");
     background-position: 190px 10px;
 }
 
+.app-filter:selected:rtl {
+    background-image: url("filter-selected-rtl.svg");
+    background-position: 10px 10px;
+}
+
 .dash-item-container > .app-well-app {
     padding: 4px 8px;
 }
@@ -765,6 +787,11 @@ StTooltip StLabel {
     background-image: url("calendar-arrow-left.svg");
     border-radius: 4px;
 }
+
+.calendar-change-month-back:rtl {
+    background-image: url("calendar-arrow-right.svg");
+}
+
 .calendar-change-month-back:hover {
     background-color: #999999;
 }
@@ -778,6 +805,11 @@ StTooltip StLabel {
     background-image: url("calendar-arrow-right.svg");
     border-radius: 4px;
 }
+
+.calendar-change-month-forward:rtl {
+    background-image: url("calendar-arrow-left.svg");
+}
+
 .calendar-change-month-forward:hover {
     background-color: #999999;
 }
@@ -872,18 +904,31 @@ StTooltip StLabel {
     padding-left: 0.3em;
 }
 
+.events-day-header:rtl {
+    padding-left: 0em;
+    padding-right: 0.3em;
+}
+
 .events-day-dayname {
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
     text-align: left;
 }
 
+.events-day-dayname:rtl {
+    text-align: right;
+}
+
 .events-day-time {
     font-size: 12px;
     color: #fff;
     text-align: right;
 }
 
+.events-day-time:rtl {
+    text-align: left;
+}
+
 .events-day-task {
     font-size: 12px;
     color: rgba(153, 153, 153, 1.0);
@@ -898,6 +943,11 @@ StTooltip StLabel {
     padding-right: 8px;
 }
 
+.events-time-box:rtl {
+    padding-right: 0px;
+    padding-left: 8px;
+}
+
 .events-event-box {
 }
 
@@ -951,10 +1001,14 @@ StTooltip StLabel {
     height: 1em;
 }
 
-#notification-scrollview > StScrollBar {
+#notification-scrollview:ltr > StScrollBar {
     padding-left: 6px;
 }
 
+#notification-scrollview:rtl > StScrollBar {
+    padding-right: 6px;
+}
+
 #notification-body {
     spacing: 5px;
 }
@@ -1014,6 +1068,11 @@ StTooltip StLabel {
     border-radius: 4px;
 }
 
+.chat-received:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 .chat-sent {
     background-gradient-direction: horizontal;
     background-gradient-start: rgba(255, 255, 255, 0);
@@ -1023,6 +1082,11 @@ StTooltip StLabel {
     border-radius: 4px;
 }
 
+.chat-sent:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 .chat-meta-message {
     padding-left: 4px;
     border-radius: 4px;
@@ -1030,6 +1094,11 @@ StTooltip StLabel {
     color: #bbbbbb;
 }
 
+.chat-meta-message:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 #notification StEntry {
     padding: 4px;
     border-radius: 4px;
@@ -1066,21 +1135,39 @@ StTooltip StLabel {
     height: 36px;
 }
 
-.summary-source-button {
+#summary-mode:rtl {
+    padding: 2px 4px 0px 0px;
+}
+
+.summary-source-button:ltr {
     padding-left: 4px;
     padding-right: 16px;
 }
 
-.summary-source-button:last-child {
+.summary-source-button:rtl {
+    padding-right: 4px;
+    padding-left: 16px;
+}
+
+.summary-source-button:last-child:ltr {
     padding-right: 12px;
 }
 
+.summary-source-button:last-child:rtl {
+    padding-left: 12px;
+}
+
 .source-title {
     font-size: 12px;
     font-weight: bold;
     padding-left: 4px;
 }
 
+.source-title:rtl {
+    padding-left: 0px;
+    padding-right: 4px;
+}
+
 /* App Switcher */
 #altTabPopup {
     padding: 8px;
@@ -1302,6 +1389,11 @@ StTooltip StLabel {
     padding-bottom: 30px;
 }
 
+.end-session-dialog-subject:rtl {
+    padding-left: 0px;
+    padding-right: 17px;
+}
+
 .end-session-dialog-description {
     font-size: 10pt;
     color: white;
@@ -1310,6 +1402,11 @@ StTooltip StLabel {
     width: 16em;
 }
 
+.end-session-dialog-description:rtl {
+    padding-right: 17px;
+    padding-left: 40px;
+}
+
 .end-session-dialog-logout-icon {
     border: 2px solid #8b8b8b;
     border-radius: 5px;
@@ -1331,14 +1428,27 @@ StTooltip StLabel {
     padding-right: 32px;
 }
 
-.end-session-dialog-app-list-item {
+.end-session-dialog-app-list:rtl {
+    padding-right: 17px;
+    padding-left: 32px;
+}
+
+.end-session-dialog-app-list-item:ltr {
     padding-right: 1em;
 }
 
-.end-session-dialog-app-list-item-icon {
+.end-session-dialog-app-list-item:rtl {
+    padding-left: 1em;
+}
+
+.end-session-dialog-app-list-item-icon:ltr {
     padding-right: 17px;
 }
 
+.end-session-dialog-app-list-item-icon:rtl {
+    padding-left: 17px;
+}
+
 .end-session-dialog-app-list-item-name {
     font-size: 10pt;
 }
@@ -1379,10 +1489,19 @@ StTooltip StLabel {
     spacing: 10px;
 }
 
-.polkit-dialog-password-label {
+.polkit-dialog-user-layout:rtl {
+    padding-left: 0px;
+    padding-right: 10px;
+}
+
+.polkit-dialog-password-label:ltr {
     padding-right: 0.5em;
 }
 
+.polkit-dialog-password-label:rtl {
+    padding-left: 0.5em;
+}
+
 .polkit-dialog-password-entry {
     background-color: white;
     color: black;